<!-- 我的参照点 -->

<template>
  <WebForm path="map" class="MapReference-MyPoint" word3>
    <div class="MapReference-MyPoint-title">
      <span>参照点</span>
    </div>

    <EasyScroll>
      <div v-for="i in 3" :key="i">
        <MinorTitle :title="`参照点 ${i}`" />

        <FormInput :label="`经度 ${i}`" :bind="`pointLon${i}`" v-bind="inputProps" @change="changePoint" />

        <FormInput :label="`纬度 ${i}`" :bind="`pointLat${i}`" v-bind="inputProps" @change="changePoint" />
      </div>

      <MinorTitle title="海拔" />

      <FormInput label="海拔" bind="pointElevation" v-bind="inputProps" @change="changePoint" />

      <FormSlot v-if="!isInherit">
        <BtnSave mutation="map/startAdd" />
      </FormSlot>
    </EasyScroll>
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const POINT_KEY_LIST = [
  ...Array(3).fill().map((_, i) => [`pointLon${i + 1}`, `pointLat${i + 1}`]),
  'pointElevation',
].flat()

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyPoint',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('map', 'map_'), CORE.mixInfo('map', 'map_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否为继承
     */
    isInherit() {
      return this.map_one.mapParent === 1
    },

    /**
     * 输入框属性
     */
    inputProps() {
      return {
        check: this.checkPoint,
        disabled: this.isInherit,
        number: true,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 检验参照点
     */
    checkPoint(value, one, bind) {
      if (this.isInherit || value) return ''
      const keyList = POINT_KEY_LIST.filter((key) => key !== bind)
      const hasValue = keyList.some((key) => one[key])
      return hasValue ? '请全部填写' : ''
    },

    /**
     * 修改参照点
     */
    changePoint(value) {
      if (!value) POINT_KEY_LIST.filter((key) => this.map_refForm.check(key))
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
